<template>
	<view>
		<!-- 模拟的标题 -->
		<!-- <image class="header" src="https://www.mescroll.com/img/beibei/header.jpg" mode="aspectFit"/> -->
		<nav-bar backState="2000">
		    <view slot="left" class="iconfont icon-ic_addresses" style="margin-left: 30upx;" @click="selectPlace">{{this.place}}</view>
		    <view slot="right" class="search_box" @click="searchClick">
		        <text class="iconfont icon-search"></text>
		        <text class="prompt" style="color: #CCCCCC;">你还在等什么</text>
		    </view>
		</nav-bar>
		<mescroll-body-diy ref="mescrollRef" @init="mescrollInit" top="0" bottom="100" @down="downCallback" @up="upCallback" >
			<!-- 轮播图 -->
			<Xsuu-swiper :swiperItems="swiperItems"></Xsuu-swiper>
			<!-- 分页的数据列表 -->
			<u-sticky :offset-top="offsetTop" :enable="enable" >
				<view class="sticky" style="background-color: #f2f2f2;">
					<u-subsection v-if="change" :bold="bold" :active-color="activeColor" :current="current" :mode="mode" :animation="true" :list="['长期', '时间银行']" @change="sectionChange" style="background-color: #f2f2f2;margin: 0.4rem 0.8rem 0 0.8rem;"></u-subsection>
				</view>
			</u-sticky>
			<good-list :list="goods" v-if="select==0" class="listcard"></good-list>
			<good-list :list="goods" v-if="select==1" class="listcard"></good-list>
		</mescroll-body-diy>
		
		<!-- 模拟的底部 -->
	<!-- 	<image class="footer" src="https://www.mescroll.com/img/beibei/footer.jpg" mode="aspectFit"/> -->
	</view>
</template>

<script>
	let _this
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/beibei/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import XsuuSwiper from "../../components/Xss-swiper/Xsuu-swiper.vue"
	import {apiGoods} from "@/api/mock.js"
	import navBar from "@/components/zhouWei-navBar/index";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy, // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
			XsuuSwiper,
			navBar
		},
		data() {
			return {
				goods: [] ,// 数据列表
				swiperItems:[
				                    {
				                            "img": '../../static/img/swipe/eth.jpg',
				                            "title": "简历链",
				                            "Subtitle": "给你的工作历程一份安心！",
				                            "tip": "限时",
				                            "url": "111"
				                        },
				                        {
				                            "img": '../../static/img/swipe/timebox.jpg' ,
				                            "title": "时间银行",
				                            "Subtitle": "年轻人的无限可能！",
				                            "tip": "推荐",
				                            "url": "111"
				                        },
				                        {
				                            "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11780621658%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914935&t=7d98cfe6b5a2634598fc7bda871aa7c9",
				                            "title": "时间碎片管理",
				                            "Subtitle": "提高时间利用率",
				                            "tip": "",
				                            "url": "111"
				                        }
										// ,
				      //                   {
				      //                       "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstc.zjol.com.cn%2Fg1%2FM000E11CggSDVi-zTuAT1Y3AAB2NSzPgKI097.jpg%3Fwidth%3D576%26height%3D340&refer=http%3A%2F%2Fstc.zjol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914972&t=9cc0a578d4818d87c43f1fe839010096",
				      //                       "title": "品牌T恤",
				      //                       "Subtitle": "￥22.99",
				      //                       "tip": "nike",
				      //                       "url": "111"
				      //                   }
				                ],
				place:'不限',
				offsetTop: 0,
				enable: true,
				mode: 'button',
				current: 0,
				activeColor: this.$u.color['primary'],
				bold: true,
				change: true,
				select:0
			}
		},
		mounted() {
			_this= this;
			//this.isLogin();

		},
		methods: {
			selectPlace(){
				uni.navigateTo({
				    url: '/pages/index/placeList/placeList',
					animationType: 'fade-in'
				});
			},
			
			// 
			//点击搜索事件
			searchClick(e) { //点击搜索框
				uni.hideKeyboard();
				uni.navigateTo({
				    url: '/pages/index/search/HM-search',
					animationType: 'fade-in'
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page,place) {
				//联网加载数据
				console.log(page)
				console.log(place)
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				console.log("当前页数为："+pageNum,"当前页长为："+pageSize)
				let pageData
				place==undefined? pageData={pageNum:pageNum,pageSize:pageSize}:pageData={pageNum:pageNum,pageSize:pageSize,place:this.place}
				console.log(pageData)
				console.log("地址复选"+this.place)
				_this.$api.companyList.getCompanyList(pageData).then(res=>{
					console.log(res)
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data; 
					console.log(curPageData)
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					console.log(curPageLen)
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = 0 
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = 0
					// 接口返回的是否有下一页 (true/false)
					let hasNext = false
					
					//设置列表数据
					if(page.num == 1) this.goods = []; //如果是第一页需手动置空列表
					this.goods = this.goods.concat(curPageData); //追加新数据
					setTimeout(()=>{
							this.mescroll.endSuccess(curPageLen)
					},20)
				}).catch(err=>{
					console.log("接口调用失败")
					//联网失败, 结束加载
				 	this.mescroll.endErr();
				})
				// apiGoods(page.num, page.size).then(res=>{
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.mescroll.endSuccess(res.list.length);

				// 	//设置列表数据
				// 	if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods=this.goods.concat(res.list); //追加新数据
				// }).catch(()=>{
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			regionBindClick(e) {
				this.place= e.place;
				let page={
					num:1,
					size:10
				}
				 this.upCallback(page,this.place)
			},
			offsetTopChange(index) {
				this.offsetTop = index == 0 ? 0 : index == 1 ? 120 : 200;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			},
			enableChange(index) {
				this.enable = index == 0 ? true : false;
			},
			sectionChange(index){
				console.log(index)
					this.select=index
									console.log(this.select)
			}

		}
	}
</script>

<style>
	page {
		background: #f2f2f2;
	}
	image{width: 100%;vertical-align: bottom;height:auto;display: block;}
	.header{z-index: 9900;position: fixed;top: --window-top;left: 0;height: 180upx;background: white;}
	.footer{z-index: 9900;position: fixed;bottom: 0;left: 0;height: 100upx;background: white;}
	.search_box {
		margin-right: 30upx;
		width: 300upx;
		height: 64upx;
		background-color: #f5f5f5;
		border-radius: 32upx;
		display: flex;
		align-items: center;
		padding: 0upx 40upx;
	
		.prompt {
			font-size: 28upx;
			color: #cccccc;
		}
		.icon_search {
			background-image: url('../../static/map_ic_search.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 29upx;
			height: 28upx;
			margin-right: 20upx;
		}
	}
	.listcard{
		margin: 0.8rem;
		border-radius: 8px;
	}
</style>
